<template>
  <div class="w-full h-full overflow-y-auto overflow-x-hidden border-t border-gray-200 pt-[20px]">
    <header class="flex items-center justify-between mb-[16px]">
      <div class="mb-[8px] text-[14px] text-[#333] font-medium">{{ $t("competition.modules.content.moduleSettings") }}
      </div>
      <el-button :icon="Trash2" link @click="handleDelete"></el-button>
    </header>

    <el-form label-width="75px">
      <!-- 内容模块设置 -->
      <div class="mb-[16px] border-b-[1px] border-[#E5E5E5]">
        <el-form-item :label="$t('competition.modules.content.backgroundColor')">
          <el-color-picker :style="`background-color: ${model.bgColor || '#000000'};`" v-model="model.bgColor" />
        </el-form-item>
      </div>
      <!-- 标题背景 -->
      <el-form-item :label="$t('competition.modules.content.titleBackground')">
        <div class="w-full max-w-full overflow-hidden">
          <ImageListUpload
            :stemImages="model.titleInfo.titleUrl ? [{ id: 'titleImage', path: model.titleInfo.titleUrl }] : []"
            actionImgStyle="width: 252px;height: 114px;" :imgNumber="1" :limit-size-img="5"
            @update:stemImages="(v) => { model.titleInfo.titleUrl = v[0]?.path || '' }">
            <!-- 可自定义上传提示信息 -->
            <template #upload-info>
              <ImageUp class="text-xl mb-1 w-4 h-4" />
              <div class="text-xs" style="color: rgba(174, 174, 174, 1)">{{ $t('选择图片') }}</div>
            </template>
          </ImageListUpload>
          <div class="text-[#AEAEAE] text-[12px] leading-[20px]">支持png、jpeg、jpg格式图片，大小不超过 5 M。</div>
        </div>
      </el-form-item>

      <!-- 标题文字 -->
      <el-form-item>
        <template #label>
          <span class="text-red-500">*</span>
          {{ $t('competition.modules.content.titleText') }}
        </template>
        <el-input v-model="model.titleInfo.title" :placeholder="$t('common.inputPhTxt')" />
      </el-form-item>

      <!-- 文本设置 -->
      <el-form-item :label="$t('competition.modules.content.textSettings')">
        <SetTextFormat v-model:modelValue="model.titleInfo.textStyle" />
      </el-form-item>

      <!-- 内容详情 -->
      <el-form-item :label="$t('competition.modules.content.contentDetails')" label-position="top" class="pl-[6px]">
        <div class="w-full max-w-full overflow-hidden">
          <WangEditor v-model="model.content" mode="default" :scrollable="true" :height="470"
            class="w-full max-w-full" />
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { Trash2, ImageUp } from '@vben/icons'
import { $t } from '#/locales'
import ImageListUpload from "#/components/common/image-list-upload.vue"
import SetTextFormat from '#/components/setTextFormat.vue'
import WangEditor from '#/components/editor.vue'

// 文本格式配置接口
interface TextFormatConfig {
  fontSize: number;
  fontColor: string;
  fontBold: boolean;
  italic: boolean;
  underline: boolean;
  alignCenter: string;
  textWidth: number;
  textHeight: number;
}

// 内容模块状态接口
export interface ContentState {
  bgType: 'color' | 'image'
  bgColor: string
  titleInfo: { title: string; titleUrl: string; textStyle: TextFormatConfig }
  content: string
}

const model = defineModel<ContentState>({ required: true })

const emit = defineEmits<{
  delete: []
}>()

const handleDelete = () => {
  emit('delete')
}
</script>

<style scoped>
.el-form-item {
  margin-bottom: 16px;
}

:deep(.wang-editor-container) {
  border-radius: 4px;
  max-width: 100%;
  overflow: hidden;
}

:deep(.w-e-toolbar) {
  border-bottom: 1px solid #dcdfe6 !important;
}

:deep(.w-e-bar-item) {
  height: none !important;

  button {
    padding: 2px !important;
  }
}

:deep(.w-e-bar) {
  font-size: 14px !important;
}

:deep(.w-e-bar-divider) {
  height: 30px !important;
}
</style>
